import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineChartWidget extends StatefulWidget {
  const LineChartWidget({super.key});

  @override
  State<LineChartWidget> createState() => _LineChartState();
}

class _LineChartState extends State<LineChartWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      color: Colors.tealAccent,
      child: LineChart(
         LineChartData(
           minX: 0,
           maxX: 10,
           minY: 0,
           maxY: 30,
           titlesData: FlTitlesData(
             topTitles: const AxisTitles(
               sideTitles: SideTitles(
                 showTitles: false
               )
             ),
             bottomTitles:  AxisTitles(
                 sideTitles: SideTitles(
                     showTitles: true,
                     reservedSize: 20,
                     interval: 1,
                     getTitlesWidget: (value,meta){
                       return Text('$value',style: const TextStyle(fontSize: 10,color: Colors.black,decoration:TextDecoration.none,));
                     }

                 )
             ),
             leftTitles:  AxisTitles(
                 sideTitles: SideTitles(
                     showTitles: true,
                   reservedSize: 40,
                   interval: 5,
                   getTitlesWidget: (value,meta){
                       return Text('$value',style: const TextStyle(fontSize: 10,color: Colors.black,decoration:TextDecoration.none,));
                 }
                 )
             ),
             rightTitles:  const AxisTitles(
                 sideTitles: SideTitles(
                     showTitles: false
                 )
             ),
           ),
           borderData: FlBorderData(
             show: true,
             border: const Border(
               top: BorderSide.none,
               right: BorderSide.none,
               bottom: BorderSide(color: Colors.black),
               left: BorderSide(color: Colors.black)
             )
           ),
           gridData: FlGridData(
               show: true,
               drawHorizontalLine: true,
               drawVerticalLine: false,
               getDrawingHorizontalLine: (value) {
                 return const FlLine(
                   color: Colors.black,
                   // 网格线颜色 strokeWidth:1,
                   dashArray: [4, 4], // 虚线样式（长度和间隔）
                 );
               }),
           lineBarsData: [
             LineChartBarData(
               spots: [const FlSpot(0.0,1.0),const FlSpot(1.0,2.0),const FlSpot(2.5,5.5),const FlSpot(4.0,10.0),const FlSpot(4.5,12.5),const FlSpot(5.5,15.8),],
               isCurved: false,
               color: const Color(0xFF01F3FF),
               dotData: const FlDotData(show: true),
               belowBarData: BarAreaData(show: true,gradient:const LinearGradient(colors:[Color(0xFF01F3FF),Colors.transparent],begin: Alignment.topCenter,end: Alignment.bottomCenter )),
             ),
           ],
         )
      ),
    );
  }
}
